/***
 *  react-router@5 路由
 *  react-router@4 之后  引入一个概念  一切皆组件
 *  vue-router 开始
 *      1、配置路由映射关系  /src/router/index.js
 *          path url地址  component 渲染的组件对象  name 别名
 *      2、路由渲染容器   <router-view></router-view> 组件渲染的位置
 *      3、声明式导航跳转  标签式导航跳转  <router-link to="跳转的url"></router-link>
 *      4、编程API方式导航  this.$router.push|replace|go|back
 *      具有路由守卫  全局守卫  组件独享守卫   组件内部守卫
 *                   前置守卫  后置守卫
 *      获取路由参数  this.$route.xxx
 *      vue3 中使用的是hook  useRouter  useRoute
 *  vue-router 结束
 *
 *
 *     react-router@5
 *     1、将router包裹整个需要路由管理的组件
 *        HashRouter  hash路由 /#home
 *        BrowserRouter  历史路由  /home
 *     2、声明式导航 组件标签导航
 *        Link
 *        NavLink  会将选中的导航  加一个class  可以基本这个class进行样式设置
 *        底层是a标签
 *        to 属性 跳转的url地址 相当于a标签href属性
 *     3、Route组件 映射组件和url对应关系   渲染容器
 *        path 匹配的url地址
 *        component 渲染的组件
 *     4、Redirect组件 重定向
 *        from 匹配路由
 *        to  跳转到的路由
 *     5、Switch  路由从上到下匹配,只匹配一条规则  匹配到之后 则后续规则不再匹配
 *
 *
 */
import React, { Component } from 'react'
// 导入路由相关组件
import { Link, NavLink, Redirect, Route, Switch } from 'react-router-dom'
// 引入组件
import Home from './pages/Home'
import News from './pages/News'
import About from './pages/About'
import NotFound from './components/NotFound'
import './assets/css/App.css'
export default class App extends Component {
  render() {
    return (
      <>
        {/* 导航标签 */}
        <div>
          {/* <Link to="/home">首页</Link> */}
          <NavLink to={{ pathname: '/home', state: { isLogin: true } }}>
            首页
          </NavLink>
        </div>
        <div>
          {/* <Link to="/news">新闻</Link> */}
          {/* 组件导航query传递参数  */}
          <NavLink to="/news?id=100&age=100">新闻</NavLink>
        </div>

        <div>
          {/* <Link to="/about">关于</Link> */}
          {/* params传递参数 */}
          <NavLink to="/about/500/tom">关于</NavLink>
        </div>
        {/* <div>
          <a href="/about">关于</a>
        </div> */}
        <hr />
        {/* 路由映射关系  组件渲染容器 */}
        {/* 匹配到/ 就重定向跳转到home路由 */}
        <Switch>
          {/* exact 严格匹配 */}
          <Redirect from="/" exact to="/home"></Redirect>
          <Route path="/home" component={Home}></Route>
          <Route path="/news" component={News}></Route>
          {/* params动态路由参数传递需要先占位 */}
          <Route path="/about/:id/:name" component={About}></Route>
          {/* 404路由  写在最后面 其他路由都匹配到 就匹配最后一个 */}
          <Route component={NotFound}></Route>
        </Switch>
      </>
    )
  }
}
